<template>
  <div class="setper">
    <!-- 显示面板 -->
    <el-dialog
      :title="`给[${name}]分配面板`"
      :visible="setperShow"
      @close="cancel"
    >
      <!-- 树状结构 -->
      <el-tree
        ref="mytree"
        :data="perlist"
        :props="{ label: 'name' }"
        default-expand-all
        :check-strictly="true"
        node-key="id"
        show-checkbox
      ></el-tree>

      <!-- 下面的按钮部分 -->
      <div class="box">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入获取权限数据
import { getPerListApi } from "@/api/permission";
// 导入获取角色详情的接口
import {getRolePerApi,setRolePerApi} from '@/api/role'
export default {
  props: ["name", "setperShow"],

  data() {
    return {
        // 树状结构的数据
      perlist: [],
    //   保存id
    roleId:''

    };
  },

  // 定义方法
  methods: {

    // 给确定添加点击事件
   async submit(){
    // 获取到你点击权限的的集合的数据
        const permIds=this.$refs.mytree.getCheckedKeys()
        // 发送请求
          await setRolePerApi({
            // 参数一是点击这项的id
            id:this.roleId,
            // 参数二是点击权限的集合
            permIds:permIds
          })
        // 关闭页面
        this.cancel()
        // 提示用户
        this.$message.success('修改成功')
    },



    // 给获取角色详情定义一个方法
    async getRolePer(id){
        // 保存点击的这一项的id
        this.roleId=id
        // 传入一个id是父组件中调用的方法
        const res=await getRolePerApi(id)
        // 获取到目前选中的节点
       this.$refs.mytree.setCheckedKeys(res.data.data.permIds)
    },


    // 给取消按钮设置点击事件
    cancel() {
      // 关闭面板
      this.$emit("update:setperShow", false);
    },

    // 发送请求获取角色权限信息
    async getPerList() {
      // 发送请求
      const res = await getPerListApi();
      // 把转换的数据赋值给树状结构数组
      this.perlist = this.trunData(res.data.data, "0");
    },

    // 定义一个方法把获取到的数据转换成树结构
    trunData(arr, pid) {
      // 定义一个空数组
      const newArr = [];
      //   遍历数据
      arr.forEach((item) => {
        // 判断一级结构
        if (item.pid === pid) {
          // 再次调用这个方法但是第二个参数是id
          const children = this.trunData(arr, item.id);
          //   判断哪长度大于0
          if (children.length > 0) {
            // 把得到的子元素赋值给item的子节点
            item.children = children;
          }
          // 往数组中追加
          newArr.push(item);
        }
      });
      //   返回出这个数组
      return newArr;
    },
  },

  //    页面一打开调用
  created() {
    // 调用获取权限数据
    this.getPerList();
    this.getPerList()
  },
};
</script>

<style>
.box {
  text-align: center;
}
</style>
